import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { List, WingBlank, Radio, InputItem, WhiteSpace, Button, Toast } from 'antd-mobile'
import { $t } from '@/i18n'
import Verify from '@/validation/verify'
import registerForm from '@/validation/form_validate/auth/registerForm' 
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import * as actions from '@/app/Models/actions'
import Wrap from '@/app/Hoc/Wrap'
import './style.scss'

@connect(
    state => state.auth || {},
    dispatch => bindActionCreators(actions, dispatch)
)
class Register extends Component {
    state = {
        form: {
            name: '',
            password: '',
            password_confirmation: '',
            type: 'genuis'
        },
        error: {
            name: false,
            password: false,
            password_confirmation: false,
            type: false,
        }
    }

    static propTypes = {
        register: PropTypes.func.isRequired,
    }

    onErrorClick = (field) => {
        const msg = Verify.getErrorByField(field)

        if (msg.length) {
            Toast.info(msg[0]);
        }
    }

    handleChange = (val, field) => {
        let formData = {...this.state.form}
        formData[field] = val
        this.setState({form: formData})
    }

    handleRegister = () => {
        const result = Verify.exec(this.state.form, registerForm)
        this.setState({error: result.getErrorsFlag({...this.state.error})})
        
        if (result.isSuccess()) {
            this.props.register(this.state.form)    
        }
    }

    render() {
        const RadioItem = Radio.RadioItem
        
        return (
            <Wrap>
                <h2 className="register">用户注册</h2>
                <WingBlank>
                    <List>
                        <InputItem 
                            type='text'
                            placeholder={ $t('message.auth.name.placeholder') }
                            maxLength='40'
                            onChange={ value => this.handleChange(value, 'name') }
                            error={ this.state.error.name }
                            onErrorClick={ () => this.onErrorClick('name') }
                        >{ $t('message.auth.name.text') }</InputItem>

                        <InputItem 
                            type='password'
                            placeholder={ $t('message.auth.password.text') }
                            maxLength='40'
                            onChange={ value => this.handleChange(value, 'password') }
                            error={ this.state.error.password }
                            onErrorClick={ () => this.onErrorClick('password') }
                        >{ $t('message.auth.password.text') }</InputItem>

                        <InputItem 
                            type='password'
                            placeholder={ $t('message.auth.password_confirmation.placeholder') }
                            maxLength='40'
                            onChange={ value => this.handleChange(value, 'password_confirmation') }
                            error={ this.state.error.password_confirmation }
                            onErrorClick={ () => this.onErrorClick('password_confirmation') }
                        >{ $t('message.auth.password_confirmation.text') }</InputItem>

                        <RadioItem 
                            checked={'genuis' === this.state.form.type}
                            onChange={ () => this.handleChange('genuis', 'type') }
                        >{ $t('message.auth.type.genuis') }</RadioItem>

                        <RadioItem 
                            checked={'boss' === this.state.form.type}
                            onChange={ () => this.handleChange('boss', 'type') }
                        >{ $t('message.auth.type.boss') }</RadioItem>
                        
                    </List>
                    <WhiteSpace />
                    <Button 
                        type="primary"
                        onClick={ this.handleRegister }
                        >注册
                    </Button>
                </WingBlank>
                
            </Wrap>
        )
    }
}

export default Register